<!-- 关联视图关系维护 -->
<template>
<div class="ElevancePup">
  <!-- 关联关系新增修改弹窗 -->
  <el-dialog
    :title="eleviewType=='add'?'关联设置':'修改关联关系'"
    :visible.sync="isShowpup"
    width="75%"
    :before-close="closePup"
    >
      <div class="popup">
        <div style="display:flex;justify-content: space-around;margin-bottom:15px">
          <el-button icon="el-icon-circle-plus-outline"  @click="clearS">新建关联关系</el-button>
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addNode" plain> 添加联合关联字段</el-button>
          <el-select v-model="relationType" placeholder="请选择关联类型">
            <el-option
              v-for="(item,index) in relationTypeArr"
              :key="index"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="itemBox">
          <!-- 合并结果展示 -->
          <div class="item pRight">
            <div style="background:#fff;text-align:center;height:35px;line-height:35px;margin:5px auto;width:120px">合并结果</div>
            <div v-for="(i,ind) of arr" :key="ind">
              <el-input v-model="arr[ind].label" disabled style="width:85%;margin-bottom:5px"></el-input>
            </div>
          </div>
          <div class="item pRight">
            <!-- 主表信息展示 -->
          <div style="background:#fff;text-align:center;height:35px;line-height:35px;margin:5px auto;width:100%">
            当前表：{{this.$storeSave.state.selectMenuData.name}}</div>
            <el-select style="width:85%;margin-bottom:5px" v-for="(i,ind1) of arr" :key="arr[ind1].leftKeyWords"  @change="(COLUNM_ID)=>currentTable(COLUNM_ID,ind1)" v-model="arr[ind1].leftKeyWords" placeholder="请选择字段">
              <el-option
                v-for="item in leftRowList"
                :key="`${item.COLUMN_NAME}-${item.DATA_TYPE}`"
                :label="`${item.COMMENTS}-${item.DATA_TYPE}`"
                :value="`${item.COMMENTS}-${item.DATA_TYPE}`"
                >
              </el-option>
            </el-select>
          </div>
          <!-- 选择关联表tree -->
          <div class="item pRight">
            <el-select style="width:85%;margin-bottom:5px;" placeholder="请选择关联表" :value="valueTitle" :clearable="clearable" @clear="clearHandle">
              <el-input
                class="selectInput"
                :placeholder="placeholder"
                v-model="filterText">
              </el-input>
              <el-option  :value="valueId" :label="valueTitle" class="options">
                <el-tree  id="tree-option"
                  ref="selectTree"
                  :accordion="accordion"
                  :data="treeData"
                  :props="props"
                  :node-key="props.value"
                  :default-expanded-keys="defaultExpandedKey"
                  :filter-node-method="filterNode"
                  @node-click="handleNodeClick">
                </el-tree>
              </el-option>
            </el-select><i class="el-icon-delete" style="color:transparent"></i>
            <div v-for="(i,index) of arr" :key="`${arr[index].RightKeyWords}`">
              <el-select style="width:85%;margin-bottom:5px;" @change="(COLUNM_ID)=>minorTable(COLUNM_ID,index)"  v-model='arr[index].RightKeyWords' placeholder="请选择字段">
              <el-option
                v-for="item in rightRowList"
                :key="item.COLUMN_NAME"
                :label="`${item.COMMENTS}-${item.DATA_TYPE}`"
                :value="`${item.COMMENTS}-${item.DATA_TYPE}`"
                >
              </el-option>
            </el-select><i class="el-icon-delete" @click="deleteItem(index)"></i>
            </div>
          </div>
        </div>
        <el-row style="text-align: center;width:170px;margin:0 auto;">
          <el-button @click="closePup" plain>取消</el-button>
          <el-button type="primary" @click="addElevance" plain>保存</el-button>
        </el-row>
      </div>
  </el-dialog>
  <!-- 关联关系展示 -->
  <TableDemo v-if="!isShowpup" @tagisShowpup="tagisShowpup" @closePage="closePage" :menuData="makeDataObj"></TableDemo>
</div>
</template>
<script>
import {QUERY_FONT_NODE, MGNDIRQUERY1, assoViewMaintain} from '@api/url'
import getTime from '@/assets/js/getDate'
// import TableDemo from './TableDemo'  //通过表格展示关联关系
// import TableDemo from"./EchartsDomo"//通过echarts展示关联关系
import TableDemo from './elevanceDemo.vue'
export default {

  data () {
    return {
      detailDataList: [],
       relationType: '', // 关联类型 1-1:1,2-1:N,3-N:1,4-N:N
      relationTypeArr: [{value: 1, label: '1:1'}, {value: 2, label: '1:N'}, {value: 3, label: 'N:1'}, {value: 4, label: 'N:N'}], // 关联方式
      modelId: null,
      isShowpup: !((this.makeType == 'update' || this.makeType == 'query')), // 是否显示弹窗
      updateData: [], // 需要修改的数据
      filterText: '',
      eleviewType: 'add', // 默认新增关联关系
      valueId: this.value, // 初始值
      valueTitle: '',
      masterTableName: '', // 主表名称
      defaultExpandedKey: [],
      arr: [{leftKeyWords: '', label: '', RightKeyWords: ''}], // 展示合并结果信息和所选的主表辅表信息
      selectTotal: [{}], // 所有选好的关联数据汇总
      selectNewData: {}, // 关联表信息
       rightRowList: [], // 关联表全字段
      leftRowList: [] // 主表全字段
    }
  },
   components: {
    TableDemo
  },
  computed: {
    selectDataobj () {
      return this.$storeSave.state.selectMenuData
    }
  },
   watch: {
    value () {
      this.valueId = this.value
      // this.initHandle()
    },

    selectDataobj (val) {
      // 选中左侧表信息之后查询主表全字段
      let param = {
        optMode: 'C',
        modelId: val.menuId,
        idType: '1', // 1数据集,2来源表,3 SQL
        connId: val.connId,
        'pageNo': '1',
        'pageSize': '15'
        }
        // this.isShowpup=true
        // 查询主表全字段
      this.queryFontNode(param, 'theme') // theme主表  elevance关联表
    },
    filterText (val) {
      console.log(val)
      console.log('filterText')
      this.$refs.selectTree.filter(val)
    }
  },
  props: {
    makeType: {
      type: String,
      default: 'add'
    },
    makeDataObj: {
      type: Object,
      default: null
    },
    // treeData:{
    //   type:Array,
    //   default:null
    // },
    /* 配置项 */
    props: {
      type: Object,
      default: () => {
        return {
          value: 'menuId', // ID字段名
          label: 'name', // 显示名称
          children: 'children' // 子级字段名
        }
      }
    },
    /* 选项列表数据(树形结构的对象数组) */
    options: {
      type: Array,
      default: () => { return [] }
    },
    /* 初始值 */
    value: {
      type: Number,
      default: () => { return null }
    },
    /* 可清空选项 */
    clearable: {
      type: Boolean,
      default: () => { return true }
    },
    /* 自动收起 */
    accordion: {
      type: Boolean,
      default: () => { return false }
    },
    placeholder: {
      type: String,
      default: () => { return '检索关键字' }
    }
  },
  created () {
    // this.$storeSave.state.selectMenuData
    let param = {
      optMode: 'C', // A :add  B:update　Ｃ：查询
      modelId: this.$storeSave.state.selectMenuData.menuId, // 表id
      connId: null, // 连接ld
      idType: '1', // 1数据集,2来源表,3 SQL
      'pageNo': '1',
      // "pageSize":"1000"
      'pageSize': '15'
    }
    debugger
    if (this.$storeSave.state.selectMenuData.type == '13') {
       // 数据库表
      this.queryFontNode(param, 'theme')// 查当前表
    }
      this.getTree()
  },
  methods: {
    closePage (data) {
      if (data) {
        this.isShowpup = !this.isShowpup
      } else {
        this.$emit('closeElevance')
      }
    },
    tagisShowpup (makeData) {
      console.log('需要修改的数据')
      console.log(makeData)
      this.updateData = makeData

      this.eleviewType = 'update'
      this.isShowpup = true
      // from ：theme主表  elevance关联表
      this.valueTitle = makeData[0].slaveTableName// 关联表的表名字
      this.masterTableName = makeData[0].masterTableName// 主表
      makeData.forEach((item, index) => {
        if (index == 0) {
          this.arr = [
            {
              leftKeyWords: `${item.masterShowfld}-${item.mFldType}`,
              label: `${item.masterShowfld}-${item.mFldType}`,
              RightKeyWords: `${item.slaveShowfld}-${item.sFldType}`
            }
          ]
        } else {
          this.arr.push({
            leftKeyWords: `${item.masterShowfld}-${item.mFldType}`,
            label: `${item.masterShowfld}-${item.mFldType}`,
            RightKeyWords: `${item.slaveShowfld}-${item.sFldType}`
          })
        }
      })
    this.relationTypeArr.forEach(ele => {
      if (ele.value == makeData[0].relationType) {
        this.relationType = ele.label // 选的连接类型
      }
    })
    console.log(makeData)
    let param = {
      optMode: 'C', // A :add  B:update　Ｃ：查询
      modelId: makeData[0].modelId, // 表id
      connId: null, // 连接ld
      idType: '1', // 1数据集,2来源表,3 SQL
      'pageNo': '1',
      // "pageSize":"550"
      'pageSize': '15'
    }
    this.queryFontNode(param, 'theme')// 查当前表，
    let data = {
      optMode: 'C', // A :add  B:update　Ｃ：查询
      modelId: makeData[0].slaveId, // 表id
      connId: null, // 连接ld
      idType: '1'// 1数据集,2来源表,3 SQL
    }
    this.queryFontNode(data, 'elevance')// 查关联表
    this.selectNewData.menuId = makeData[0].slaveId
    },
     // 当前表选字段
    minorTable (COLUNM_ID, ind) {
      console.log(this.arr)// 选中的左边字段
      console.log(this.arr[ind].RightKeyWords)
       let repeats = 0
      this.arr.findIndex((item, ind) => {
        if (item.RightKeyWords == COLUNM_ID) {
          repeats++
          if (repeats >= 2) {
            item.RightKeyWords = ''
            this.$alert('该字段已关联，请重新选择字段', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                return
                console.log('相等')
              }
            })
          }
        }
      })
      if (this.arr[ind].leftKeyWords !== '') { // 如果主表已经选择
      // 获取到关联表全字段数组中对应的数据
      let rightData = this.rightRowList.find(
        item => {
          if (`${item.COMMENTS}-${item.DATA_TYPE}` == COLUNM_ID) {
            console.log(item)
            return item
            }
          })
          // 获取到主表全字段数组中对应的数据
      let leftData = this.leftRowList.find(item => {
        console.log(this.arr[ind].leftKeyWords)
        if (`${item.COMMENTS}-${item.DATA_TYPE}` == this.arr[ind].leftKeyWords) {
          this.arr[ind].label = `${item.COMMENTS}-${item.DATA_TYPE}`
          this.arr[ind].DATA_TYPE = item.DATA_TYPE
          return item
        }
      })
      // 比较主表和关联表字段是否一致
      let isSam = leftData.DATA_TYPE == rightData.DATA_TYPE
        if (!isSam) {
        this.$alert('关联数据类型不一致，请选择对应的字段关联', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            // 不一致清空数据
            this.arr[ind].RightKeyWords = ''
            this.arr[ind].label = ''
            this.arr[ind].DATA_TYPE = ''
          }
        })
        }
      }
    },
    // 当前表选字段
    currentTable (content, ind) {
      console.log('选择当前表')
      console.log(content)// 当前表选中的字段
      let repeats = 0
      // 当前字段是否重复判断
      debugger
      this.arr.findIndex((item, index) => {
        if (item.leftKeyWords == content) {
          repeats++
          if (repeats >= 2) {
            item.leftKeyWords = ''
            this.$alert('该字段已关联，请重新选择字段', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                return
                console.log('相等')
              }
            })
          }
        }
        })
        // 如果辅表已经选择
      if (this.arr[ind].RightKeyWords !== '') {
        // 获取到对应的主表字段信息
      let leftData = this.leftRowList.find(
        item => {
          if (`${item.COMMENTS}-${item.DATA_TYPE}` == content) {
            // 给arr已选的主表信息赋值
            this.arr[ind].label = `${item.COMMENTS}-${item.DATA_TYPE}`
            this.arr[ind].DATA_TYPE = item.DATA_TYPE
            console.log(item)
            console.log(this.arr)
            return item
            }
          })
          //
          console.log(rightData)
          // 获取到对应的关联表字段信息
      let rightData = this.rightRowList.find(item => {
        console.log(this.arr[ind].RightKeyWords)
        if (`${item.COMMENTS}-${item.DATA_TYPE}` == this.arr[ind].RightKeyWords) {
          return item
        }
      })
      debugger
      // 比较主表和关联表字段类型是否一致
        let isSam = leftData.DATA_TYPE == rightData.DATA_TYPE
        console.log(isSam)
        if (!isSam) {
        this.$alert('关联字段类型不一致，请选择对应的字段关联', '提示', {
          confirmButtonText: '确定',
            callback: action => {
              // 不一致的时清空数据
              this.arr[ind].label = ''
              this.arr[ind].leftKeyWords = ''
              this.arr[ind].DATA_TYPE = ''
            }
          })
        }
        // else{
        //   console.log('字段类型一致')
        //   // this.saveDetailList()
        // }
      }
    },
    // 添加新的关联关系
    clearS () {
      // 清除辅表字段
      this.eleviewType = 'add'
      this.rightRowList = ''// 清空关联表
      this.arr.forEach(ele => {
        ele.RightKeyWords = ''
      })
      this.clearHandle()
    },
     // MGNDIRQUERY  查询关联表tree
      getTree () {
        let param = {
          parentId: '0', // 常量
          menuId: '0', // 0查询全树，否则查询该节点下树
          type: '1', // 1-数据集，2-目录，3-菜单，4-数据连接，5-外部连接
          optMode: '1'// 常量
        }
        this.treeData = []
        this.$http.post(MGNDIRQUERY1, param).then(res => {
          console.log('查询辅表出参')
          console.log(res.data.data)
          if (res.status == '200') {
          this.treeData = res.data.data
          }
        })
      },
    // 添加联合关联字段
    addNode () {
      // 点击添加关联子字段时，增加arr存放将要选择的主表字段和附表字段信息
      this.arr.push({RightKeyWords: '', leftKeyWords: '', label: '', DATA_TYPE: ''})
    },
    // 删除arr对应下标的数据，界面相应改变
    deleteItem (index) {
    console.log('要删除的下标:', index)
    // 不能把所有的数据都删除，删除最后一组关系的时候，只把数据清空，不删除
    if (this.arr.length == 1) {
      this.arr = [{leftKeyWords: '', RightKeyWords: ''}]
      // 点击删除的时候，清空对应的公共数据
      this.relationType = ''// 关联类型 1-1:1,2-1:N,3-N:1,4-N:N
      this.relationMode = ''// 关联方式1-等值连接，2-左连接，3-右连接，4-全连接
    this.selectNewData = {}
    } else {
      this.arr.splice(index, 1)
    }
  },

  addElevance () {
    // 进行非空校验
    // 先调用新增目录接口
    // 成功后调用自助数据集接口
    let isAdd = true
    console.log('遍历arr')
    this.arr.forEach((ele, index) => {
      // 如果没选择关联类型
      if (!this.relationType) {
        isAdd = false
        this.$alert('请选择关联类型', '提示', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      }
      if (!ele.RightKeyWords || !ele.leftKeyWords) {
        isAdd = false
        this.$alert('当前表和关联表字段不能为空', '提示', {
            confirmButtonText: '确定',
            callback: action => {

            }
          })
      }
    })
    let timeStr = getTime.getTime()
      console.log(this.makeDataObj)
      console.log('this.selectNewDatathis.selectNewDatathis.selectNewData')
      console.log(this.selectNewData)
      let param = {
      optMode: this.eleviewType == 'add' ? 'A' : 'U', // 新增A:新增 D:删除 U:修改
      relationId: this.eleviewType == 'add' ? `${timeStr}${this.arr.length}` : this.updateData[0].relationId, // 关联id（前端生成）,// 关联id（前端生成）
      modelId: this.makeDataObj.menuId, // 原始表模型id
      slaveId: this.selectNewData.menuId, // 关联表id
      relationType: this.relationType, // 关联类型 1-1:1,2-1:N,3-N:1,4-N:N
      relationMode: null, // 关联方式1-等值连接，2-左连接，3-右连接，4-全连接
      showPost: '1', // 显示位置1-左，2-右
      seqno: '2', // 序号  获取外面有几个关联的元素 暂时写死
      createdBy: this.$storeSave.state.userInfo.username || 'XXX', // 创建人
      createdDt: getTime.getTime(), // 创建日期
      updatedBy: this.$storeSave.state.userInfo.username || 'XXX', // 更新人
      updatedDt: getTime.getTime(), // 更新日期
      lists: []
    }
    this.arr.forEach((ele) => {
      let rightInd = null // 右侧字段id
      let leftInd = null // 左侧字段id
      this.rightRowList.findIndex((item, ind) => {
        if (`${item.COMMENTS}-${item.DATA_TYPE}` == ele.RightKeyWords) {
          rightInd = ind
        }
        })
        this.leftRowList.findIndex((item, ind) => {
          if (`${item.COMMENTS}-${item.DATA_TYPE}` == ele.leftKeyWords) {
            leftInd = ind
          }
        })
      console.log(leftInd)
      console.log(rightInd)
    param.lists.push({
      mFldType: this.leftRowList[leftInd].DATA_TYPE,
      sFldType: this.rightRowList[rightInd].DATA_TYPE,
      relationId: this.eleviewType == 'add' ? `${timeStr}${this.arr.length}` : this.updateData[0].relationId, // 关联id,//关联id
      masterFld: this.leftRowList[leftInd].COLUMN_NAME, // fldEnname,//主表字段
      masterShowfld: this.leftRowList[leftInd].COMMENTS, // 主表字段显示名称
      slaveFld: this.rightRowList[rightInd].COLUMN_NAME, // fldEnname,//关联表字段
      slaveShowfld: this.rightRowList[rightInd].COMMENTS, // 关联表字段显示名称
      seqno: rightInd,
      createdBy: this.$storeSave.state.userInfo.username || 'XXX',
      createdDt: timeStr,
      updatedBy: this.$storeSave.state.userInfo.username || 'XXX',
      updatedDt: timeStr
    })
    // 解决反显关联类型显示文字，但是要求传值为key值
    this.relationTypeArr.forEach(ele => {
      if (param.relationType == ele.label) {
        param.relationType = ele.value
      }
    })
    console.log(':新增、修改关联字段传参')
    console.log(param)
    })
    if (isAdd) {
      this.$http.post(assoViewMaintain, param).then(res => {
        console.log(res)
        if (res.data.code == '200') {
        this.arr = []
        this.relationType = '', // 关联类型 1-1:1,2-1:N,3-N:1,4-N:N
        this.relationMode = '', // 关联方式1-等值连接，2-左连接，3-右连接，4-全连接
        this.selectNewData = {}
        // 关闭弹窗，显示关联关系查询
        this.closePup()
        } else {
          this.$alert(res.data.message, '提示', {
            confirmButtonText: '确定',
            callback: action => {

            }
          })
        }
      }).catch(err => {
        console.log(err)
        this.$confirm(err.data.message, '提示', {
            confirmButtonText: '确定',
            type: 'fail'
          })
      })
    }
  },
  queryFontNode (param, from) {
    // QUERY_FONT_NODE
    // from ：theme主表  elevance关联表
    this.$http.post(QUERY_FONT_NODE, param).then(res => {
      console.log('内部关联全查询字段成功')
      console.log(res)
      if (res.data.code == '200' && res.data.data) {
        if (from == 'theme') { // 查询主表字段
          this.leftRowList = res.data.data
        } else if (from == 'elevance') { // 查关联表字段
      console.log(this.selectNewData)
      console.log('this.selectNewData.menuId=param.modelId')
        this.selectNewData.menuId = param.modelId
          this.rightRowList = res.data.data
          console.log(this.selectNewData)
        }
      } else {
        this.$confirm(res.data.message, '提示', {
          confirmButtonText: '确定'
        })
      }
    }).catch(err => {
      console.log('查询字段异常')
      this.$confirm(err.data.message, '提示', {
        confirmButtonText: '确定'
      })
    })
  },
  // 初始化值
  initHandle () {
    console.log('initHandle')
    if (this.valueId) {
      this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label] // 初始化显示
      this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中
      this.defaultExpandedKey = [this.valueId] // 设置默认展开
    }
    // this.initScroll()
  },
  // 初始化滚动条
  initScroll () {
    this.$nextTick(() => {
      let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
      let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
      scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
      scrollBar.forEach(ele => ele.style.width = 0)
    })
  },
  // 切换选项
  handleNodeClick (node) {
    console.log('handleNodeClick')
    if (node.attr != '1') {
      console.log(node)
      this.valueTitle = node[this.props.label] // 关联表名称
      this.valueId = node[this.props.value] // 关联表id
      this.$emit('getValue', this.valueId)
      this.defaultExpandedKey = []
      // 去查询字段 切换附表的时候，让已选的附表字段清空
      this.arr.forEach(ele => {
      ele.RightKeyWords = ''
    })
    if (this.valueId == this.$storeSave.state.selectMenuData.menuId) { // 辅表id和主表id一致的情况下
        this.$alert('主表不能作为关联表，请重新选择', '提示', {
          confirmButtonText: '确定'
        })
        this.valueTitle = ''
      } else if (node.type != '13') {
        this.$alert('关联表只能是数据库表，请重新选择', '提示', {
          confirmButtonText: '确定'
        })
        this.valueTitle = ''
      } else {
        this.selectNewData = node
        this.accordion = true
        let param = {
          optMode: 'C', // A :add  B:update　Ｃ：查询
          modelId: node.menuId, // 表id
          connId: null, // 连接ld
          idType: '1', // 1数据集,2来源表,3 SQL
          'pageNo': '1',
          'pageSize': '15'// 全字段查询pagesize可更改，但是不建议分页所以尽量把数据写大一些
          // "pageSize":"1000"//全字段查询pagesize可更改，但是不建议分页所以尽量把数据写大一些
        }
        this.queryFontNode(param, 'elevance') // 切换关联表信息后，查询关联表全字段
        // from ：theme主表  elevance关联表
      }
    }
  },
  // 清除选中
  clearHandle () {
    this.valueTitle = ''
    this.valueId = null
    this.defaultExpandedKey = []
    this.clearSelected()
    this.$emit('getValue', null)
  },
  /* 清空选中样式 */
  clearSelected () {
    let allNode = document.querySelectorAll('#tree-option .el-tree-node')
    allNode.forEach((element) => element.classList.remove('is-current'))
  },
  filterNode (value, data) {
    console.log('filterNode')
    if (!value) return true
    return data.name.indexOf(value) !== -1
  },
  closePup () {
    this.isShowpup = false// 关闭弹窗
    this.arr = [{leftKeyWords: '', RightKeyWords: ''}]// 重置生成select框的数据
    this.relationType = '', // 关联类型 1-1:1,2-1:N,3-N:1,4-N:N
    this.relationMode = '', // 关联方式1-等值连接，2-左连接，3-右连接，4-全连接
    this.selectNewData = {}
    this.valueTitle = ''
  }
  }
}
</script>
<style lang="less" scoped>
.ElevancePup{
  min-width: 100%;
  margin:0 auto;
  height: calc(100% - 1px);
}
  .left,.right,.center{
    width: 200px;
    height: 200px;
    border:1px solid red;
  }
  .ElevancePup .popup{
    height: 100%;
    background: white;
    border-radius:6px;
    margin:0 auto;
    padding: 8px;
    padding-top: 0;
    .itemBox{
      margin:15px auto;
      border: 1px solid #ccc;
      border-radius:5PX;
      display: flex;
      justify-content: space-between;
      .item{
        text-align: center;
        padding:15px 0;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
        .activeStyle{
          background: rgb(158, 194, 201);
          border-radius:5px ;
        }

      }
      .pRight{width:33%}
    }
  }
  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
    height: auto;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
  }
  .el-select-dropdown__item.selected{
    font-weight: normal;
  }
  .el-tree .el-tree-node__content{
    padding: 0 20px;
  }
  .el-tree-node__label{
    font-weight: normal;
  }
  .is-current .el-tree-node__label{
    color: #409EFF;
    font-weight: 700;
  }
  .is-current .el-tree-node__children .el-tree-node__label{
    color:#606266;
    font-weight: normal;
  }
  .selectInput{
    padding: 0 5px;
    box-sizing: border-box;
  }
</style>
